<template>
  <view class="seckill">
    <!-- #ifndef H5 -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar
        :is-back="true"
        title="联营共享"
        backIconColor="#fff"
        :title-bold="true"
        :is-fixed="false"
        :border-bottom="false"
        :background="background"
        :title-color="'#fff'"
      ></u-navbar>
    </u-sticky>
    <!-- #endif -->
	
    <mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" @down="downCallback" @up="upCallback">
      <view class="goods-seckill">
        <view class="goods-list m-t-20">
          <view v-for="(item, index) in seckillGoods" :key="index">
            <view class="promotion-card">
              <view class="card-content">
                <!-- 商品图片 -->
                <view class="product-image">
                  <u-image width="180rpx" height="180rpx" :src="item.goods_image" mode="aspectFit" />
                </view>
                
                <!-- 商品信息 -->
                <view class="product-info">
                  <view class="product-name">{{item.goods_name}}</view>
                  
                  <!-- 价格区域 -->
                  <view class="price-section">
                    <view class="price-row">
                      <text class="price-label"><u-icon name="/static/images/gold.png" color="#FFD700" size="40"></u-icon></text>
                      <text class="original-price">{{item.ticket_num}}</text>
                    </view>
                    
                    <view class="discount-notice">
                      <view class="discount-line"></view>
                      <text class="discount-text">不能与其他优惠同享</text>
                    </view>
                    
                    <view class="price-row">
                      <text class="price-label">售价</text>
                      <text class="current-price">¥{{item.goods_min_price}}</text>
                    </view>
                  </view>
                  
                  <!-- 标签和按钮 -->
                  <view class="action-section">
                    <view class="tag-group">
                      <view class="new-user-tag">
                        <text>联营专享</text>
                      </view>
                      <view class="invite-tag">
                        <text>已售{{item.sales_actual}}单</text>
                      </view>
                    </view>
                    
                    <view class="button-group">
                      <template v-if="item.stock == 0">
                        <view class="sold-out-button">已售罄</view>
                      </template>
                      <template v-else>
                        <router-link :to="{path: '/pages/goods_details/goods_details', query: {id: item.goods_id}}">
                          <view class="buy-button">
                            <text>马上抢</text>
                            <text class="arrow">›</text>
                          </view>
                        </router-link>
                      </template>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import {
  getLicaiTime,
  getLicaiGoods
} from "@/api/activity";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
import { mapGetters, mapActions } from 'vuex'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      active: 0,
      navBg: 0,
      upOption: {
        auto: false,
        empty: {
          use: true,
          icon: '/static/images/goods_null.png',
          tip: "暂无商品～",
        },
      },
      seckillTime: [],
      seckillGoods: []
    };
  },
  methods: {
    async downCallback(page) {
      this.seckillGoods = []
      await this.getSeckillTimeFun()
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      let pageNum = page.num;
      let pageSize = page.size;
      const {seckillTime, active} = this
      if(!seckillTime.length) return this.mescroll.endSuccess(0,false)
      let id =  seckillTime[active].id
      getLicaiGoods({
        page_no: pageNum,
        page_size: pageSize,
        licai_id:id
      }).then(res => {
        let curPageData = res.data.lists;
        let hasNext = !!res.data.more;
        let curPageLen = curPageData.length;
        if (pageNum == 1) this.seckillGoods = [];
        this.seckillGoods = this.seckillGoods.concat(curPageData);
        this.mescroll.endSuccess(curPageLen, hasNext);
      }).catch(() => {
        this.mescroll.endErr()
      })
    },
    
    async getGoodsDetailFun(){
      await this.getSeckillTimeFun()
      this.mescroll.resetUpScroll();
    },
    // 获取秒杀时间段
    getSeckillTimeFun() {
      return new Promise((resolve) => {
        getLicaiTime().then(({code, data}) => {
          if (code == 1) {
            // 抢购中
            let index = data.findIndex(item => item.status == 1);
            if (index == -1) {
              // 未开始
              index = data.findIndex(item => item.status == 0);
            }
            if(index == -1) {
              // 全部结束选中最后一个
              index = data.length - 1
            }
            this.seckillTime = data;
            this.$nextTick(function(){
              this.active = index
              resolve()
            })
          }
        })
      })
    },
    // 查看其他时间段
    exchangeTime(index) {
      this.active = index
      this.seckillGoods = []
      this.mescroll.resetUpScroll();
    },
    
    // 获取商品总数量
    getTotalItems() {
      let count = 0;
      if (this.seckillGoods && this.seckillGoods.length > 0) {
        this.seckillGoods.forEach(item => {
          count += (parseInt(item.stock) || 0) + (parseInt(item.sales_actual) || 0);
        });
      }
      return count;
    }
  },
  computed: {
    ...mapGetters(['appConfig']),
    currentStatus() {
      const {active, seckillTime} = this
      return seckillTime[active] && seckillTime[active].status
    },
    
    background() {
      const { center_setting } = this.appConfig
      return center_setting.top_bg_image
        ? {
            'background': `linear-gradient(90deg, #B71C1C 0%, #E53935 100%)`
          }
        : {}
    }
  }
};
</script>

<style lang="scss">
.seckill {
  min-height: 100vh;
  background-color: #e62129;
  padding-bottom: 20rpx;
  
  .goods-seckill {
    padding: 0 20rpx;
    
    .goods-list {
      .promotion-card {
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 16rpx;
        overflow: hidden;
        position: relative;
        padding: 20rpx;
        
        .card-content {
          display: flex;
          
          .product-image {
            width: 180rpx;
            height: 180rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20rpx;
          }
          
          .product-info {
            flex: 1;
            
            .product-name {
              font-size: 26rpx;
              color: #333;
              margin-bottom: 15rpx;
              line-height: 1.3;
              height: 70rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            
            .price-section {
              margin-bottom: 15rpx;
              
              .price-row {
                display: flex;
                align-items: center;
                height: 40rpx;
                
                .price-label {
                  font-size: 24rpx;
                  color: #666;
                  margin-right: 8rpx;
                }
                
                .original-price {
                  font-size: 24rpx;
                  color: #666;
                }
                
                .current-price {
                  font-size: 24rpx;
                  color: #e62129;
                  font-weight: bold;
                }
              }
              
              .discount-notice {
                height: 30rpx;
                position: relative;
                margin: 0 20rpx;
                
                .discount-line {
                  width: 100%;
                  height: 1px;
                  background: #e62129;
                  position: absolute;
                  top: 50%;
                  left: 0;
                }
                
                .discount-text {
                  position: absolute;
                  font-size: 20rpx;
                  color: #e62129;
                  background: #fff;
                  padding: 0 4rpx;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  white-space: nowrap;
                }
              }
            }
            
            .action-section {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .tag-group {
                display: flex;
                
                .new-user-tag, .invite-tag {
                  height: 34rpx;
                  padding: 0 10rpx;
                  border-radius: 4rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 20rpx;
                }
                
                .new-user-tag {
                  background-color: #fce0e0;
                  color: #e62129;
                  margin-right: 10rpx;
                }
                
                .invite-tag {
                  background-color: #fce0e0;
                  color: #e62129;
                }
              }
              
              .button-group {
                display: flex;
                align-items: center;
                
                .free-button {
                  height: 50rpx;
                  padding: 0 20rpx;
                  color: #e62129;
                  font-size: 24rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-right: 15rpx;
                }
                
                .buy-button {
                  height: 50rpx;
                  padding: 0 15rpx;
                  background-color: #e62129;
                  color: #fff;
                  font-size: 24rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 25rpx;
                  
                  .arrow {
                    margin-left: 2rpx;
                    font-size: 28rpx;
                    font-weight: bold;
                  }
                }
                
                .sold-out-button {
                  height: 50rpx;
                  padding: 0 20rpx;
                  background-color: #CCCCCC;
                  color: #fff;
                  font-size: 24rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 25rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>